<template>
	<view class="tenIcons">
		<view v-for="(item,index) in tenIcons" :key="index" class="icons" @click="shop_dhClick(item.name,item.ShopColumn_Id)">
			<image :src="item.icon" class="icon"></image>
			<view class="title">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				Domain_ICON: app.globalData.Domain_ICON,
				tenIcons: [{
						icon: '../../static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
					{
						icon: '@/static/icon/dami.jpg',
						name: '黑龙江大米'
					},
				]
			}
		},
		onLoad() {


		},
		methods: {
			shop_dhClick(name, ShopColumn_Id) {
				uni.navigateTo({
					url: "/pages/index/gongyou?name='htyp'" + '&item_name=' + name + '&ShopColumn_Id=' +
						ShopColumn_Id + '&json_url=' + 'hmgx/shopHtyp_item.json'
				})
			},
		}

	}
</script>

<style scoped lang="scss">
	@media screen and (min-width:800px) {}

	@media (max-width: 480px) {
		.tenIcons{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap; 
			background-color: #f8fff3;
			border-radius: 10rpx;
		}
		.icons{
			width: calc(20% - 20rpx); /* 计算每个元素宽度，减去间距 */
			margin-bottom: 20rpx;
		}
		.icon {
			width: 100rpx;
			height: 100rpx;
		}

		.title {
			font-size: 25rpx;
			 text-align: center;
		}
	}
</style>